<template>
    <div class="charge">
        <Header-a/>

        <div class="c1">
            <div class="c11 mar-center">

                <div class="c12">积分充值</div>
                <div class="c13">积分为联名纵横智能语音系统成员购买系统服务所需支付的虚拟货币，关于积分有以下说明： <br/>
                    1.	新用户赠送100积分，1元可购买10积分 <br/>
                    2.	文本转语音价格：1积分/字 <br/>
                    3.	语音转文字价格：10积分/分钟 <br/>
                    4.	充值须知：积分为联名纵横智能语音系统成员购买系统服务所需支付的虚拟货币，积分不可流通、不可兑现，仅可在联名纵横智能语音系统平台内使用。
                </div>


                    <!--1、 积分不可流通、不可兑现，仅可在联名纵横智能语音系统平台内使用。 <br/>
                    2、 积分可支付的服务包括但不限于：项目入围服务、中标服务、项目监理服务。 <br/>
                    3、积分余额为负时，请尽快充值，以免影响您的正常使用。-->


                <div class="c14">

                    <div class="c15 container-align" v-for="i in data" :key="i.id">
                        <div class="container-align c19">
                            <img class="c16" src="../assets/img/22.png" alt=""/>
                            <div class="c17">{{ i.integral }} 积分</div>
                            <div class="c18">{{i.desc}}</div>
                        </div>
                        <div class="container-align c20">
                            <div class="c21">{{i.label}}</div>
                            <div class="c22">¥ {{i.price}}</div>
                            <div class="c23 text-center" @click="pay(i.id)">购买</div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <Copyright/>

        <div class="c3" v-if="chargePay">

            <div class="c31">
                <img class="c32" src="../assets/img/23.png" alt="" @click="closePay"/>
                <div class="c33 text-center">微信支付</div>
                <div class="c34 mar-center" id="qr-code"></div>
                <div class="charged-btn mar-center">
                    <img src="../assets/img/37.png" alt="" @click="alreadyPay"/>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
import HeaderA from "@/components/child/Header";
import Copyright from "@/components/child/Copyright";

export default {
    name: "Charge",
    components: { HeaderA, Copyright },
    data () {
        return {
            chargePay: false,
            qr: '',
            "data": [],
            payId: null,
            QRCode: null
        };
    },
    created () {
        this.findPayList();
    },
    methods: {
        closePay () {
            this.chargePay = false;
            window.location.reload();
        },
        pay (id) {
            this.chargePay = true;
            this.payId = id
            this.getPayCode();
        },
        async findPayList () {
            let res = await this.$http.post('findPayList', {});
            if (res.data && res.data.data) {
                this.data = res.data.data;
            }
            console.log(res)
        },
        async alreadyPay () {
            let res = await this.$http.post('payQuery', {
                no: this.qr.no
            });
            alert(res.data.message);
            if (res.data.result === 1) {
                window.location.reload();
            }
            console.log(res)
        },
        async getPayCode () {
            let res = await this.$http.post('getPayCode', {
                id: this.payId.toString(),
                wxId: this.$root.wxId
            });
            if (res.data && res.data.data) {
                this.qr = res.data.data;
                if (this.QRCode) this.QRCode.clear()
                // eslint-disable-next-line no-undef
                this.QRCode = new QRCode("qr-code", {
                    text: res.data.data.codeUrl,
                    width: 284,
                    height: 284,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    // eslint-disable-next-line no-undef
                    correctLevel : QRCode.CorrectLevel.H
                });
            }
            console.log(res)
        }
    }
}
</script>

<style scoped lang="scss">
.charge{
    height: 100%;
    overflow-y: auto;
    background-color: #F8FBFA;
    position: relative;
    .c3{
        position: fixed;
        left: 0;
        top: 62px;
        width: 100%;
        height: calc(100% - 122px);
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        .c31{
            width: 658px;
            height: 480px;
            background-color: #FFFFFF;
            position: relative;
            .charged-btn{
                width: 97px;
                height: 63px;
                padding-top: 23px;
                cursor: pointer;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .c34{
                width: 284px;
                height: 284px;
                // background-color: #000000;
                margin-top: 20px;
            }
            .c33{
                font-size: 20px;
                line-height: 28px;
                color: #000000;
                padding-top: 59px;
            }
            .c32{
                width: 19px;
                height: 19px;
                position: absolute;
                top: 20px;
                right: 20px;
                cursor: pointer;
            }
        }
    }
    .c1{
        margin-top: 45px;
        background-color: #FFFFFF;
        padding-top: 35px;
        padding-bottom: 35px;
        .c23{
            width: 111px;
            height: 40px;
            line-height: 40px;
            background-color: #26C6AB;
            border-radius: 3px;
            font-size: 16px;
            color: #FFFFFF;
            cursor: pointer;
        }
        .c22{
            font-size: 22px;
            font-weight: 600;
            line-height: 30px;
            color: #1F907D;
            margin-left: 8px;
            width: 100px;
        }
        .c21{
            font-size: 16px;
            line-height: 22px;
            color: rgba(31, 144, 125, 0.6);
        }
        .c18{
            font-size: 16px;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.6);
        }
        .c15{
            padding-top: 22px;
            padding-bottom: 23px;
            justify-content: space-between;
        }
        .c17{
            white-space: nowrap;
            width: 115px;
            line-height: 22px;
            color: #000000;
        }
        .c16{
            width: 42px;
            height: 31px;
            margin-right: 19px;
        }
        .c11{
            width: 1010px;
        }
        .c12{
            height: 28px;
            font-size: 20px;
            line-height: 28px;
            color: #000000;
            margin-bottom: 8px;
        }
        .c13{
            line-height: 21px;
            color: #000000;
            opacity: 0.61;
        }
        .c14{
            width: 1010px;
            height: 432px;
            background-color: rgba(38, 198, 171, 0.2);
            /*opacity: 0.21;*/
            margin-top: 30px;
            padding-left: 54px;
            padding-right: 44px;
            overflow-y: auto;
        }
    }
}
</style>